<template>
  <div class="">
    <!--pc page-->
    <div class="pc_market_page">
      <messageBoard></messageBoard>
      <modalAgent></modalAgent>
      <!--banner-->
      <div class="banner_huoke">
        <img src="http://image.xuemei99.com/banner_pic_xiaoshoubao_new.jpg" alt="">
        <button type="button" class="banner_open_btn" data-toggle="modal" data-target="#myModal"></button>
      </div>

      <!--销售的本质 essence-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">销售的本质</p>
          <ul class="essence_ul text-center clear">
            <li class="essece_left"></li>
            <li class="essence_right text-left">
              <p class="font_18">销售的本质是沟通</p>
              <p class="font_14 col_666">有效的沟通，是成交的重中之重。</p>
            </li>
          </ul>
        </div>
      </div>

      <!--解决 solve-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">销售宝可以帮您解决</p>
          <ul class="solve_ul text-center clear">
            <li class="">
              <img src="http://image.xuemei99.com/link_icon_xiaoshoubao.png" alt="">
              <p class="font_18 margin_top_16">顾客快速连接</p>
            </li>
            <li class="">
              <img src="http://image.xuemei99.com/dig_icon_xiaoshoubao.png" alt="">
              <p class="font_18 margin_top_16">顾客意向挖掘</p>
            </li>
            <li class="">
              <img src="http://image.xuemei99.com/analyse_icon_xiaoshoubao.png" alt="">
              <p class="font_18 margin_top_16">顾客分析成交</p>
            </li>
            <li class="">
              <img src="http://image.xuemei99.com/stay_icon_xiaoshoubao.png" alt="">
              <p class="font_18 margin_top_16">顾客留存复购</p>
            </li>
          </ul>
        </div>
      </div>

      <!--解决顾客快速连接 link-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">解决顾客快速连接</p>
          <p class="col_666 width_700 margin_0_auto font_18 text-center margin_top_20">微信电子名片多渠道推送，无论跟顾客是不是好友都能最快连接</p>
          <ul class="link_ul margin_0_auto text-center clear">
            <li>
              <img src="http://image.xuemei99.com/gongzhonghao_pic_xiaoshoubao.png" alt="">
              <p>公众号推送</p>
            </li>
            <li>
              <img src="http://image.xuemei99.com/friend_pic_xiaoshoubao.png" alt="">
              <p>微信好友推送</p>
            </li>
            <li>
              <img src="http://image.xuemei99.com/group_pic_xiaoshoubao.png" alt="">
              <p>微信群推送</p>
            </li>
          </ul>
        </div>
      </div>

      <!--顾客端界面展示 show-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">顾客端界面展示</p>
          <p class="col_666 width_700 margin_0_auto font_18 text-center margin_top_20">名片、产品、消息、官网四大板块，一目了然</p>
          <ul class="show_ul margin_0_auto text-center clear">
            <li>
              <img src="http://image.xuemei99.com/mingpian_pic_xiaoshoubao.png" alt="">
            </li>
            <li>
              <img src="http://image.xuemei99.com/product_pic_xiaoshoubao.png" alt="">
            </li>
            <li>
              <img src="http://image.xuemei99.com/message_pic_xiaoshoubao.png" alt="">
            </li>
            <li>
              <img src="http://image.xuemei99.com/website_pic_xiaoshoubao.png" alt="">
            </li>
          </ul>
        </div>
      </div>

      <!--解决顾客意向挖掘-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">解决顾客意向挖掘</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">数据分析后台自动查看顾客成交意向</p>
          <div class="intention_box width_700 text-center">
            <img src="http://image.xuemei99.com/dig_pic_xiaoshoubao.png" alt="">
          </div>
        </div>
      </div>

      <!--解决顾客分析成交-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">解决顾客分析成交</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">数据分析后台自动查看顾客成交意向</p>
          <div class="intention_box width_700 text-center">
            <img src="http://image.xuemei99.com/analyse_pic_xiaoshoubao.png" alt="">
          </div>
        </div>
      </div>

      <!--解决顾客留存复购-->
      <div class="item_wei_shop bg_fff">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">解决顾客留存复购</p>
          <p class="col_666 font_18 width_700 margin_0_auto text-center margin_top_20">随时随地联系顾客再次跟进，客户不流失复购有保障</p>
          <div class="intention_box width_700 text-center">
            <img src="http://image.xuemei99.com/stay_pic_xiaoshoubao.png" alt="">
          </div>
        </div>
      </div>

      <!--体验与下载-->
      <div class="item_wei_shop bg_F4F6F9">
        <div class="width_1108 margin_0_auto">
          <p class="font_28">体验与下载</p>
          <div class="download_box text-center">
            <img src="http://image.xuemei99.com/code_pic_xiaoshoubao.png" alt="">
            <p class="font_14">扫码体验销售宝模板小程序</p>
          </div>
        </div>
      </div>

      <!--销售宝开通流程 flow-->
      <div class="join_flow">
        <div class="width_1108 col_fff margin_0_auto">
          <p class="font_28">销售宝开通流程</p>
          <div class="flow_box margin_top_60 clear">
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/inquiry_icon_huokebao.png" alt="">
              <p>查询加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/contact_icon_huokebao.png" alt="">
              <p>联系加盟商</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/pay_icon_huokebao.png" alt="">
              <p>付款签署协议</p>
            </div>
            <div class="flow_right_icon"></div>
            <div class="flow_img_box">
              <img src="http://image.xuemei99.com/use_icon_huokebao.png" alt="">
              <p>开通交付使用</p>
            </div>
          </div>
          <div class="text-center margin_top_60"><button type="button" class="join_daili_btn bg_2577EF" data-toggle="modal" data-target="#myModal">立即开通</button></div>
        </div>
      </div>


    </div>

    <!--mobile page-->
    <div class="mobile_market_page">
      <!--banner-->
      <div class="mobile_product_banner mobile_market_banner_bg">
        <div class="col_fff border_0">
            <p class="mobile_banner_title">销售宝</p>
            <p class="mobile_banner_sm_title">让顾客与门店销售触手可及</p>
            <button type="button" class="bg_2577EF col_fff mobile_banner_btn" @click="mobile_shearch_agent">立即开通</button>
          </div>
      </div>

      <!--销售的本质是沟通-->
      <div class="bg_fff mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">销售的本质是沟通</p>
          <p class="col_666 font_14 margin_top_10">有效的沟通，是成交的重中之重。</p>
        </div>
        <img src="http://image.xuemei99.com/benzhi_pic_xiaoshoubao.png" alt="" class="margin_top_6" style="width: 50%">
      </div>

      <!--销售宝可以帮您解决-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">销售宝可以帮您解决</p>
        </div>
        <img src="http://image.xuemei99.com/jiejue_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>


      <!--解决顾客快速连接-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">解决顾客快速连接</p>
          <p class="col_666 font_14 margin_top_10">微信电子名片多渠道推送，无论跟顾客是不是好友都能最快连接</p>
        </div>
        <img src="http://image.xuemei99.com/quicklink_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>

      <!--顾客端界面展示-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">顾客端界面展示</p>
          <p class="col_666 font_14 margin_top_10">名片、产品、消息、官网四大板块，一目了然</p>
        </div>
        <img src="http://image.xuemei99.com/mobile_display_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>

      <!--解决顾客意向挖掘-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">解决顾客意向挖掘</p>
          <p class="col_666 font_14 margin_top_10">数据分析后台自动查看顾客成交意向</p>
        </div>
        <img src="http://image.xuemei99.com/dig_pic_xiaoshoubao.png" alt="" class="margin_top_6" style="width: 95%">
      </div>

      <!--解决顾客分析成交-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">解决顾客分析成交</p>
          <p class="col_666 font_14 margin_top_10">数据分析后台自动查看顾客成交意向</p>
        </div>
        <img src="http://image.xuemei99.com/analysis_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>

      <!--解决顾客留存复购-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">解决顾客留存复购</p>
          <p class="col_666 font_14 margin_top_10">随时随地联系顾客再次跟进，客户不流失复购有保障</p>
        </div>
        <img src="http://image.xuemei99.com/fugou_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>

      <!--体验与下载-->
      <div class="bg_F4F6F9 mobile_huoke_item mobile_huoke_sm_shop">
        <div class="padding_left_15 padding_right_15 item_title_box">
          <p class="font_20">体验与下载</p>
        </div>
        <img src="http://image.xuemei99.com/download_pic_xiaoshoubao.png" alt="" class="margin_top_6">
      </div>

      <!--销售宝开通流程-->
      <div class="mobile_huoke_item mobile_huoke_sm_shop mobile_huoke_open_item">
        <div class="padding_left_15 padding_right_15 col_fff item_title_box">
          <p class="font_20">销售宝开通流程</p>
        </div>
        <img src="http://image.xuemei99.com/open_pic_huokebao.png" alt="" class="margin_top_20">
        <button type="button" class="bg_2577EF col_fff font_14 margin_top_30 to_kelianke_btn" @click="mobile_shearch_agent">立即开通</button>
      </div>




      <!--mobile 加盟商查询弹出框-->
      <mobileAgentModal :mobile-mask="mobile_agent_mask" v-on:succ="succ"></mobileAgentModal>
    </div>

    <!--底部-->
      <Foot></Foot>
  </div>
</template>

<script>
  import Foot from '@/components/foot/foot'
  import messageBoard from '@/components/messageBoard/messageBoard'
  import modalAgent from '@/components/modal/modal_agent'
  import mobileAgentModal from '@/components/modal/mobile_agent_modal'
  export default {
    name: 'market',
    components: {
      messageBoard,
      modalAgent,
      Foot,
      mobileAgentModal
    },
    methods: {
      /**
       * 移动端
       *点击立即开通
       * 查询加盟商
       * **/
      mobile_shearch_agent(){
        let that = this;
        that.mobile_agent_mask = true;
        $(".mobile_agent_modal").animate({"height": '476px'}, '500', 'swing');
      },

      /**
       * 子组件修改父组件数据回调函数
       * **/
      succ(data){
        this.mobile_agent_mask = false;
      }
    },
    data(){
        return{
            mobile_agent_mask:false
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .banner_huoke{
    position: relative;
  }
  .banner_huoke img{
    width: 100%;
  }
  .banner_open_btn{
    position: absolute;
    width: 130px;
    height: 38px;
    top: 63%;
    left: 46%;
    opacity: 0;
    z-index: 999;
  }
  .essence_ul{
    width: 600px;
    margin: 0 auto;
    padding: 30px 0px;
  }
  .essence_ul li{
    width: 300px;
    height: 300px;
  }
  .essece_left{
    background: url("http://image.xuemei99.com/benzhi_pic_xiaoshoubao.png") no-repeat center;
    background-size: cover;
  }

  .essence_right {
    padding-top: 123px;
    padding-left: 20px;
  }
  .solve_ul{
    width: 740px;
    margin: 52px auto;
    padding-left: 0;
    padding-right: 0;
  }
  .solve_ul li{
    width: 140px;
    margin-left: 60px;
  }
  .solve_ul li:first-child{
    margin-left: 0;
  }
  .solve_ul li img{
    width: 100%;
  }
  .link_ul{
    width: 758px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 33px;
  }
  .link_ul li{
    width: 238px;
    height: 466px;
    margin-left: 22px;
  }
  .link_ul li:first-child{
    margin-left: 0;
  }
  .link_ul li img{
    width: 100%;
    height: 100%;
    margin-bottom: 9px;
  }
  .show_ul{
    width: 940px;
    padding-left: 0;
    margin-top: 32px;
  }
  .show_ul li{
    width: 220px;
    height: 376px;
    margin-left: 20px;
  }
  .show_ul li:first-child{
    margin-left: 0;
  }
  .show_ul li img{
    width: 100%;
  }
  .intention_box{
    margin: 32px auto 0 auto;
  }
  .intention_box img{
    width: 100%;
  }
  .download_box{
    margin-top: 40px;
  }
  .download_box img{
    width: 200px;
    margin-bottom: 16px;
  }

  .item_wei_shop{
    padding: 60px 0;
  }
  .download_ul li{
    width: 200px;
    margin-left: 100px;
  }
  .download_ul li:first-child{
    margin-left: 0;
  }
  .download_ul li img{
    width: 100%;
    height: 200px;
    margin-bottom: 16px;
  }

  .join_flow{
    background: url("http://image.xuemei99.com/process_bg_jiameng.jpg") no-repeat center;
    background-size: cover;
    padding: 80px 0;
  }
  .flow_box{
    padding-left: 20px;
    padding-right: 20px;
  }
  .flow_img_box,.flow_right_icon{
    float: left;
  }
  .flow_img_box{
    width: 120px;
  }
  .flow_img_box img{
    width: 120px;
    height: 120px;
  }
  .flow_img_box p{
    margin-top: 20px;
    font-size: 18px;
  }
  .flow_right_icon{
    width: calc(33.333% - 160px);
    width: -moz-calc(33.333% - 160px);
    width: -webkit-calc(33.333% - 160px);
    height: 120px;
    background: url("http://image.xuemei99.com/next_icon_jiameng.png") no-repeat center;
    background-size: 1em;
  }
  .join_daili_btn{
    width: 200px;
    height: 36px;
    line-height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
  }
  .mobile_market_banner_bg{
    background-image: url("http://image.xuemei99.com/mobile_banner2_pic_home.jpg");
  }

</style>
